﻿<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>数据大屏</title>
  <script th:src="@{/js/data screen/jquery.js}"></script>
  <link th:href="@{/css/data screen/comon0.css}" rel="stylesheet"/>
</head>
<script>
  $(window).load(function(){
    $(".loading").fadeOut()
  })

  /****/
  $(document).ready(function(){
    var whei=$(window).width()
    $("html").css({fontSize:whei/20})
    $(window).resize(function(){
      var whei=$(window).width()
      $("html").css({fontSize:whei/20})
    });
  });
</script>
<script th:src="@{/js/data screen/echarts.min.js}"></script>
<script th:src="@{/js/data screen/js.js}"></script>
<body>
<div class="canvas" style="opacity: .2">
  <iframe frameborder="0" th:src="@{/js/data screen/index.html}" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
  <div class="loadbox"> <img th:src="@{/picture/data screen/loading.gif}"> 页面加载中... </div>
</div>
<div class="head">
  <h1>学生信息管理系统</h1>
  <div class="weather">
    <span id="showTime"></span>
  </div>

  <script>
    var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
      clearTimeout(t);//清除定时器
      dt = new Date();
      var y=dt.getFullYear();
      var mt=dt.getMonth()+1;
      var day=dt.getDate();
      var h=dt.getHours();//获取时
      var m=dt.getMinutes();//获取分
      var s=dt.getSeconds();//获取秒
      document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
      t = setTimeout(time,1000); //设定定时器，循环运行
    }

  </script>
</div>
<div class="mainbox">
  <ul class="clearfix">
    <li>
      <div class="boxall" style="height: 3.2rem">
        <div class="alltitle">学生年级分布</div>
        <div class="allnav" id="echart1"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3.2rem">
        <div class="alltitle">学生专业分布表</div>
        <div class="allnav" id="echart2"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3.2rem">
        <div style="height:100%; width: 100%;">
          <div class="sy" id="fb1"></div>
          <div class="sy" id="fb2"></div>
          <div class="sy" id="fb3"></div>
        </div>
        <div class="boxfoot">
        </div>
      </div>
    </li>
    <li>
      <div class="bar">
        <div class="barbox">
          <ul class="clearfix">
            <li class="pulll_left counter" id="studentTotalCount">12581189</li>
            <li class="pulll_left counter">2025</li>
          </ul>
        </div>
        <div class="barbox2">
          <ul class="clearfix">
            <li class="pulll_left">学生总人数 </li>
            <li class="pulll_left">新年快乐</li>
          </ul>
        </div>
      </div>
      <div class="map">
        <div class="map1"><img th:src="@{/picture/data screen/lbx.png}" alt="加载中"></div>
        <div class="map2"><img th:src="@{/picture/data screen/jt.png}" alt="加载中"></div>
        <div class="map3"><img th:src="@{/picture/data screen/map.png}" alt="加载中"></div>
        <div class="map4" id="map_1"></div>
      </div>
    </li>
    <li>
      <div class="boxall" style="height:3.4rem">
        <div class="alltitle">宿舍分布表</div>
        <div class="allnav" id="echart4"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3.2rem">
        <div class="alltitle">模块标题样式4</div>
        <div class="allnav" id="echart5"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3rem">
        <div class="alltitle">年龄分布图</div>
        <div class="allnav" id="echart6"></div>
        <div class="boxfoot"></div>
      </div>>
    </li>
  </ul>
</div>
<div class="back"></div>

<script th:src="@{/js/data screen/china.js}"></script>
<script th:src="@{/js/data screen/area_echarts.js}"></script>
<!--班级分布表-->
<script>
  $(document).ready(function () {
    // 初始化 ECharts 实例
    var echart1 = echarts.init(document.getElementById('echart1'));
    var echart2 = echarts.init(document.getElementById('echart2'));
    var echart4 = echarts.init(document.getElementById('echart4'));
    var echart6 = echarts.init(document.getElementById('echart6'));

    // 定义图表配置项
    var option1 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '人数',
        type: 'bar',
        data: []
      }]
    };

    var option2 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '人数',
        type: 'bar',
        data: []
      }]
    };

    var option4 = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line'
        }
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '人数',
        type: 'line',
        data: []
      }]
    };

    // 定义图表配置项
    var option6 = {
      title: {
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '年龄分布',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: []
        }
      ]
    };

    // 设置初始配置
    echart6.setOption(option6);
    echart1.setOption(option1);
    echart2.setOption(option2);
    echart4.setOption(option4);

    // 使用 AJAX 获取所有数据
    $.ajax({
      url: '/datas/getAllData',
      type: 'GET',
      dataType: 'json',
      success: function (data) {
        // 更新学生总人数
        $('#studentTotalCount').text(data.totalCount);

        // 提取年级名称和人数
        var grades = data.gradeDistribution.map(item => item.grade);
        var gradeCounts = data.gradeDistribution.map(item => item.count);

        // 更新年级分布图表数据
        echart1.setOption({
          xAxis: {
            data: grades
          },
          series: [{
            data: gradeCounts
          }]
        });

        // 提取专业名称和人数
        var majors = data.majorDistribution.map(item => item.major);
        var majorCounts = data.majorDistribution.map(item => item.count);

        // 更新专业分布图表数据
        echart2.setOption({
          xAxis: {
            data: majors
          },
          series: [{
            data: majorCounts
          }]
        });
      },
      error: function (xhr, status, error) {
        console.error("Error fetching all data:", error);
      }
    });

    // 使用 AJAX 获取宿舍分布数据
    $.ajax({
      url: '/datas/getHotelDistribution',
      type: 'GET',
      dataType: 'json',
      success: function (data) {
        // 提取宿舍ID和人数
        var hotelIds = data.hotelDistribution.map(item => `宿舍${item.hotelId}`);
        var hotelCounts = data.hotelDistribution.map(item => item.count);

        // 更新宿舍分布图表数据
        echart4.setOption({
          xAxis: {
            data: hotelIds
          },
          series: [{
            data: hotelCounts
          }]
        });
      },
      error: function (xhr, status, error) {
        console.error("Error fetching hotel distribution data:", error);
      }
    });

    // 使用 AJAX 获取年龄分布数据
    $.ajax({
      url: '/datas/getAgeDistribution',
      type: 'GET',
      dataType: 'json',
      success: function (data) {
        // 提取年龄和人数
        var ages = data.ageDistribution.map(item => item.age);
        var ageCounts = data.ageDistribution.map(item => item.count);

        // 更新年龄分布图表数据
        echart6.setOption({
          series: [{
            data: ageCounts.map((count, index) => ({
              value: count,
              name: ages[index]
            }))
          }]
        });
      },
      error: function (xhr, status, error) {
        console.error("Error fetching age distribution data:", error);
      }
    });
  });

</script>
</body>
</html>
